extends ../_layout

block active
  - sidebar_active = 'colors.html'

block content
  mixin paletteColor(colorClass)
    .box-placeholder.b0(class="#{colorClass}")= ('.'+colorClass)
  mixin palette(brand)
    .table-grid
      .col
        +paletteColor('bg-'+brand+'-light')
      .col
        +paletteColor('bg-'+brand)
      .col
        +paletteColor('bg-'+brand+'-dark')

  h3 Colors
    small Color swatches

  - var brands = ['primary', 'success', 'info', 'warning', 'danger', 'inverse', 'green', 'pink', 'purple', 'yellow']
  - var mono = ['gray-darker', 'gray-dark', 'gray', 'gray-light', 'gray-lighter']

  .panel.panel-default
    .panel-body
      - each val in brands
        +palette(val)

      .table-grid
        - each col in mono
          .col
            +paletteColor('bg-'+col)
